<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>扩展 layui 的导出插件 layui.excel excel - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="现有Excel操作前端库中，XLSX.JS功能强大但是操作颇为不便，于是封装了此插件，依赖jQuery，支持Layui插件形式加载，导出仅需一句话。
导出excel功能基于 XLSX.js，下载功能基于 FileSaver，读取文件基于 H5的 FileReader。"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>扩展 layui 的导出插件 layui.excel</a> <span class="layui-badge layui-bg-green layui-hide-xs">excel</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/11634672/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">藏锋**丨</cite> <img src="/qqapp/101235792/905B6DB06066DB844F6F30D4E770668F/100" alt="藏锋**丨"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>现有Excel操作前端库中，XLSX.JS功能强大但是操作颇为不便，于是封装了此插件，依赖jQuery，支持Layui插件形式加载，导出仅需一句话。 导出excel功能基于 XLSX.js，下载功能基于 FileSaver，读取文件基于 H5的 FileReader。</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2020-11-2 </span> <span class="layui-inline">创建：2018-12-29 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="https://fly.layui.com/jie/46036/" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <div class="layui-elem-quote">
         环境提示：预览环境需要部署在服务器下，不然无法异步获取需要导出的数据
       </div>现有Excel操作前端库中，XLSX.JS功能强大但是操作颇为不便，于是封装了此插件，依赖jQuery，支持Layui插件形式加载，导出仅需一句话。
       <br>导出excel功能基于 XLSX.js，下载功能基于 FileSaver，读取文件基于 H5的 FileReader。。
       <br>
       <div class="layui-elem-quote">
        ！！！！！！！！！！！！！！！重要！！！！！！！！！！！！！！！！！！！
        <br>最新的代码和文档均在GITHUB以及码云，社区更新可能不及时可能会碰上一些修复过的BUG
        <br>2020-11-02: 社区上传附件已无法使用导致无法更新插件，请使用GitHub或码云获取最新稳定版本
       </div>Github: <a href="https://github.com/wangerzi/layui-excel" target="_blank" rel="nofollow">https://github.com/wangerzi/layui-excel</a> 
       <br>码云（国内下载较快）： <a href="https://gitee.com/wangerzi/layui-excel" target="_blank" rel="nofollow">https://gitee.com/wangerzi/layui-excel</a> 
       <br>
       <div class="layui-elem-quote">
        演示及文档
       </div>在线演示：
       <br><a href="http://excel.wj2015.com" target="_blank" rel="nofollow">http://excel.wj2015.com</a> 
       <br>在线文档（请以此文档为准，layui插件中文档维护不及时）：
       <br><a href="http://excel.wj2015.com/_book" target="_blank" rel="nofollow">http://excel.wj2015.com/_book</a>
       <br>作者博客：
       <br><a href="https://blog.wj2015.com" target="_blank" rel="nofollow">https://blog.wj2015.com</a>
       <br>
       <br>
       <div class="layui-elem-quote">
         浏览器兼容性
       </div>导出支持 IE10+、Firefox、Chrome 等主流浏览器
       <br>导入仅支持 Edge、Firefox、Chrome 等新型浏览器
       <br>
       <div class="layui-elem-quote">
         非layui或非模块化支持
       </div>引入jQuery和插件源代码，通过全局变量 LAY_EXCEL 调用函数，具体可见demo： <a href="http://excel.wj2015.com/demos/noLayui/index.html" target="_blank" rel="nofollow">http://excel.wj2015.com/demos/noLayui/index.html</a> 
       <br>
       <div class="layui-elem-quote">
        功能预览：
       </div>花式设置样式：
       <br>
       <img src="/upload/2019_3/11634672_1552244336136_56967.jpg"> 
       <br>导出数据测试和导出接口数据：
       <br>
       <img src="https://raw.githubusercontent.com/wangerzi/layui-excel/master/ScreenToGif.gif"> 
       <br>导出复杂表头、样式和公式：
       <br>
       <img src="https://raw.githubusercontent.com/wangerzi/layui-excel/master/ScreenToGif-2.gif"> 
       <br>导入数据：
       <br>
       <img src="https://raw.githubusercontent.com/wangerzi/layui-excel/master/ScreenToGif-3.gif"> 
       <br>
       <div class="layui-elem-quote">
         加群交流：
       </div>QQ群号：555056599
       <br>
       <img src="/upload/2019_1/11634672_1547033710734_43816.png"> 
       <br>
       <div class="layui-elem-quote">
         期望收集
       </div>
       <img src="/upload/2019_1/11634672_1547032486175_96474.png"> 
       <br>
       <div class="layui-elem-quote">
         提醒：这里的函数列表比较老，请至 <a href="http://excel.wj2015.com/_book" target="_blank" rel="nofollow">http://excel.wj2015.com/_book</a> 查看 ！！！
        <br> 提醒：这里的函数列表比较老，请至 <a href="http://excel.wj2015.com/_book" target="_blank" rel="nofollow">http://excel.wj2015.com/_book</a> 查看 ！！！
        <br> 提醒：这里的函数列表比较老，请至 <a href="http://excel.wj2015.com/_book" target="_blank" rel="nofollow">http://excel.wj2015.com/_book</a> 查看 ！！！
       </div>
       <div class="layui-elem-quote">
         函数列表
       </div>
       <img src="/upload/2019_1/11634672_1547032512393_99502.png"> 
       <br>
       <br>
       <div class="layui-elem-quote">
         重要函数参数配置
       </div>
       <img src="/upload/2019_1/11634672_1547032561205_32639.png"> 
       <br>
       <img src="/upload/2019_1/11634672_1547032623614_41325.png"> 
       <br>
       <br>
       <div class="layui-elem-quote">
         fields参数设计
       </div>在实际使用的过程中，后端给的参数多了，或者字段数据不符合导出要求，这都是很常见的情况。为了导出数据的顺序正确和数据映射正确，于是新增了这个方法。
       <br>
       <br>fields 用于表示对象中的属性顺序和映射关系，支持『数组』、『对象』、『回调函数』三种方式
       <br>
       <br>假如后台给出了这样的数据：
       <br>
       <pre>{<br>    "code":0,<br>    "msg":"",<br>    "count":3,<br>    "data":[<br>        {<br>            "id":10000,<br>            "username":"user-0",<br>            "sex":"女",<br>            "city":"城市-0",<br>            "sign":"签名-0",<br>            "experience":255,<br>            "logins":24,<br>            "wealth":82830700,<br>            "classify":"作家",<br>            "score":57,<br>            "start": '2018-12-29',<br>            "end": "2018-12-30"<br>        }<br>    ]<br>}</pre>
       <img src="/upload/2018_12/11634672_1546071535657_45311.jpg"> 
       <br>
       <img src="/upload/2019_1/11634672_1546567839022_3521.png"> 
       <br>
       <img src="/upload/2019_1/11634672_1546567849115_84070.png"> 
       <br>
       <br>
       <img src="/upload/2019_1/11634672_1547032695114_97981.png"> 
       <br>
       <hr>
       <img src="/upload/2019_1/11634672_1547032738239_66258.png"> 
       <br>使用方法请查看 GITHUB文档，由于篇幅原因不再贴出
       <br>
       <br>
       <div class="layui-elem-quote">
         功能概览
       </div>- 支持梳理导出的数据并导出多种格式数据
       <br>- 支持IE、火狐、chrome等主流浏览器
       <br>- 普通工作电脑最多支持9列45W行数据规模的导出
       <br>- 支持 xlx、xlsx、csv格式的前端数据读取以及数据梳理
       <br>- 支持单个文件多个 sheet 的导出
       <br>- 提供方便的列合并辅助方法
       <br>
       <div class="layui-elem-quote">
         使用方法
       </div>JS使用样例：
       <br>
       <pre>// 注：lay_exts/ 为扩展中所有文件的存放路径<br>layui.config({<br>	base: 'lay_exts/',<br>}).extend({<br>	excel: 'excel',<br>});<br>layui.use(['jquery', 'excel', 'layer'], function() {<br>		var $ = layui.jquery;<br>		var layer = layui.layer;<br>		var excel = layui.excel;<br><br>		// 模拟从后端接口读取需要导出的数据<br>		$.ajax({<br>			url: 'list.json'<br>			,dataType: 'json'<br>			,success(res) {<br>				var data = res.data;<br>				// 重点！！！如果后端给的数据顺序和映射关系不对，请执行梳理函数后导出<br>				data = excel.filterExportData(data, [<br>					'id'<br>					,'username'<br>					,'experience'<br>					,'sex'<br>					,'score'<br>					,'city'<br>					,'classify'<br>					,'wealth'<br>					,'sign'<br>				]);<br>				// 重点2！！！一般都需要加一个表头，表头的键名顺序需要与最终导出的数据一致<br>				data.unshift({ id: "ID", username: "用户名", experience: '积分', sex: '性别', score: '评分', city: '城市', classify: '职业', wealth: '财富', sign: '签名' });<br><br>				var timestart = Date.now();<br>				excel.exportExcel(data, '导出接口数据', 'xlsx');<br>				var timeend = Date.now();<br><br>				var spent = (timeend - timestart) / 1000;<br>				layer.alert('单纯导出耗时 '+spent+' s');<br>			}<br>			,error() {<br>				layer.alert('获取数据失败，请检查是否部署在本地服务器环境下');<br>			}<br>		});<br>	});</pre>导出数据返回样例：
       <br>
       <pre>{<br>    "code":0,<br>    "msg":"",<br>    "count":3,<br>    "data":[<br>        {<br>            "id":10000,<br>            "username":"user-0",<br>            "sex":"女",<br>            "city":"城市-0",<br>            "sign":"签名-0",<br>            "experience":255,<br>            "logins":24,<br>            "wealth":82830700,<br>            "classify":"作家",<br>            "score":57<br>        },<br>        {<br>            "id":10001,<br>            "username":"user-1",<br>            "sex":"男",<br>            "city":"城市-1",<br>            "sign":"签名-1",<br>            "experience":884,<br>            "logins":58,<br>            "wealth":64928690,<br>            "classify":"词人",<br>            "score":27<br>        },<br>        {<br>            "id":10002,<br>            "username":"user-2",<br>            "sex":"女",<br>            "city":"城市-2",<br>            "sign":"签名-2",<br>            "experience":650,<br>            "logins":77,<br>            "wealth":6298078,<br>            "classify":"酱油",<br>            "score":31<br>        }<br>    ]<br>}</pre>
       <div class="layui-elem-quote">
         更新预告
       </div>v1.6 支持快速设置边框，分段递归获取数据函数封装，新增常见问题总览
       <br>
       <div class="layui-elem-quote">
         更新记录
       </div>2019-03-11 v1.5 打包依赖方便使用并增加兼容性，支持花式设置样式，正式支持导入，修复各种BUG
       <br>2019-01-13 v1.4 魔改xlsx-style以支持设置样式、列宽、行高、公式等，并提供相应的辅助方法生成需要的配置信息
       <br>2018-01-09 v1.3 支持导出多个sheet，合并导出的列，~~设置单元格样式~~（插件限制，暂未解决）
       <br>2019-01-04 v1.2 支持前端多文件多Sheet读取 Excel 数据并梳理数据格式，大量数据导出效率优化
       <br>2018-12-29 v1.1 重写内部下载逻辑，支持IE、Firefox、chrome等主流浏览器，梳理数据函数支持回调
       <br>2018-12-14 v1.0 最初版本 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/11634672_1600419612369_45412.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://gitee.com/wangerzi/layui-excel" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> <a href="https://github.com/wangerzi/layui-excel" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-black"> 去 GitHub 下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>